<template>
  <div class="max">
    <my-header :backBtn="true">
			<div slot="title">
				人脸录入
			</div>
		</my-header>
    <div class="tl cont-nof">
      <div class="weui-cell weui-cell_select weui-cell_select-after my-weui-cells">
        <div class="weui-cell__hd">
          <label class="weui-label">班级</label>
        </div>
        <div class="weui-cell__bd">
          <select class="weui-select" @change="queryFn" v-model="params.clazzId">
            <option :value="item.id" v-for="item in clazzList">{{item.gradeName}}-{{item.name}}</option>
          </select>
        </div>
      </div>
      <div class="weui-cells my-weui-cells">
        <a class="weui-cell weui-cell_access" href="javascript:void (0);" v-for="item in studentList">
          <div class="weui-cell__bd">
            <p>{{item.name}}</p>
          </div>
          <div class="weui-cell__ft" @click="checkDetail(item)">
            <div style="color: orange" v-if="!item.face">未录入</div>
            <div style="color: cornflowerblue" v-if="item.face.startsWith('0')">认证中</div>
            <div style="color: green" v-if="item.face.startsWith('1')">已录入</div>
            <div style="color: orangered" v-if="item.face.startsWith('2')">认证失败</div>
          </div>
        </a>
        <div class="weui-loadmore weui-loadmore_line" v-if="studentList.length===0">
          <span class="weui-loadmore__tips">暂无数据</span>
        </div>
        <a href="javascript:void(0);" style="float: right" class="weui-cell weui-cell_link"
           v-if="params.pages>params.current">
          <div class="weui-cell__bd" @click="loadmore">查看更多</div>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        params: {
          clazzId: '',
          current: 1,
          size: 10,
          total: 0,
          pages: 0
        },
        studentList: [],
        clazzList: [],
      }
    },
    methods: {
      clickNavbar(type) {
        this.params.loginType = type;
        this.queryFn();
      },
      queryFn() {
        this.studentList = [];
        this.$http.fetchStudentList(this.params).then(resp => {
          let data = resp.data;
          this.params.current = data.current;
          this.params.size = data.size;
          this.params.pages = data.pages;
          this.params.total = data.total;
          this.studentList = data.records;
        })
      },
      loadmore() {
        this.params.size += 15;
        this.queryFn();
      },
      fetchClazzList() {
        this.$http.fetchClazzList().then(resp => {
          let clazzList = resp.data;
          this.clazzList = clazzList;
          if (clazzList.length === 1) {
            this.params.clazzId = clazzList[0].id;
          }
          this.queryFn();
        })
      },
      checkDetail(item) {
        let data = {
          id: item.id,
          loginType: 'student',
        }
        this.$router.push({
          path: '/photograph',
          query: data
        })
      }
    },
    created() {
      this.fetchClazzList();
    },
  }
</script>

<style scoped>
  .panel_main {
    width: 100%;
    height: calc(100% - 5.6rem);
    overflow: hidden;
    font-size: 1.4rem;
  }

  .panel_list {
    width: 100%;
    display: inline-block;
  }

  .panel_list:nth-child(2n-1) {
    background: #fff;
  }

  .panel_list > div {
    float: left;
    height: 3rem;
    line-height: 3rem;
    box-sizing: border-box;
  }

  .panel_list .panel_list_1 {
    width: 40%;
  }

  .panel_list .panel_list_2 {
    width: 25%;
  }

  .panel_list .panel_list_3 {
    width: 35%;
  }

  .panel_main .panel_list_main {
    height: calc(100% - 6.2rem);
    overflow: auto;
  }
</style>
